<template>
    <div class="pageMain">
        <div class="boxMain">
            <div class="middleTopBox">
                <div class="leftBox specialCla mr20px">
                    <div class="leftBox">
                        <div class="backImg imgUrl"><span style="margin-bottom: 10px">20次</span></div>
                        <div class="imgText green">已执行任务</div>
                    </div>
                    <div class="leftBox">
                        <div class="backImg imgUrl1"><span style="margin-bottom: 10px">2次</span></div>
                        <div class="imgText orange">未执行任务</div>
                    </div>
                </div>
                <div class="middleBox">
                    <div class="lastRound flexCenter">
                        <div class="secondRound flexCenter">
                            <div class="firstRound flexCenter">
                                <div style="width: 80%; height: 80%;" id="mainChart1"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leftBox specialCla ml20px">
                    <div class="leftBox">
                        <div class="backImg imgUrl2"><span style="margin-bottom: 10px">1次</span></div>
                        <div class="imgText blue">正在执行任务</div>
                    </div>
                    <div class="leftBox">
                        <div class="backImg imgUrl3"><span style="margin-bottom: 10px">0次</span></div>
                        <div class="imgText red">执行失败任务</div>
                    </div>
                </div>
            </div>
            <el-image class="bottomImg" :src="image1"/>
        </div>
        <MiddleBottom />
    </div>
  </template>
  
  <script setup name="Dashboard">
    import { useBtnPermiStore } from '@/store/buttonPermi'
    import * as echarts from 'echarts';
    import { onMounted, ref } from 'vue'
    import image1 from '@/assets/newImage/botIma.png'
    import MiddleBottom from './middleBottom.vue'

    onMounted(() => {
        var chartDom = document.getElementById('mainChart1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '50%'],
                    startAngle: 230,
                    endAngle: -50,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    itemStyle: {
                        color: '#76e2ee'
                    },
                    progress: {
                        show: true,
                        width: 16,
                        roundCap: true,
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 16,
                            color: [
                                [1, '#232f3d'], // 0~10% 红轴
                            ]
                        },
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                            lineStyle: {
                            width: 1,
                            color: '#a6d0dc'
                        }
                    },
                    splitLine: {
                        distance: -52,
                        length: 10,
                        lineStyle: {
                        width: 2,
                            color: '#a6d0dc'
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        borderRadius: 8,
                        offsetCenter: [0, 0],
                        fontWeight: 'bolder',
                        color: '#fff',
                        formatter: [
                            '{a|今日已执行任务}',
                            '{b|{value}%}',
                            '{a|任务总数：25}'
                        ].join('\n'),

                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 12,
                                lineHeight: 40
                            },
                            b: {
                                color: '#fff',
                                fontSize: 40,
                                fontWeight: 500,
                            },
                        }
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                },
            ]
        };

        option && myChart.setOption(option);
    })
  </script>
  
  <style lang="scss" scoped>
  .pageMain {
        padding: 30px;
        padding-bottom: 0px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        //   justify-content: center;
        align-items: center;
        width: 750px;
        height: 966px;
        // background: linear-gradient(180deg, rgba(0,102,134,0.05) 0%, rgba(0,102,134,0.1) 100%);
        box-shadow: inset 0px 0px 25px 1px rgba(64,229,240,0.3);
        border: 1px solid #006686;
    .boxMain {
      position: relative;
      height: 540px;
      display: flex;
        flex-direction: column;
        //   justify-content: center;
        align-items: center;
    }
    .middleTopBox {
        height: 408px;
        display: flex;
        justify-content: center;
    }
    .bottomImg {
        width: 620px;
        position: absolute;
        bottom: 0px;
    }
    .leftBox {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .specialCla {
        height: 100%;
        justify-content: space-around;
    }
    .imgText {
      font-size: 12px;
      margin-top: 10px;
      font-weight: bold;
    }
    .green {
      color: #4ba68a;
    }
    .orange {
        color: #FF9100;
    }
    .blue {
        color: #00CBFF;
    }
    .red {
        color: #FF0000;
    }
    .backImg {
      width: 109px;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
    .imgUrl {
      background-image: url('@/assets/newImage/image3.png');
    }
    .imgUrl1 {
      background-image: url('@/assets/newImage/image2.png');
    }
    .imgUrl2 {
      background-image: url('@/assets/newImage/image1.png');
    }
    .imgUrl3 {
      background-image: url('@/assets/newImage/image4.png');
    }
    .middleBox {
        // width: 438px;
        // height: 575px;
        // background-image: url('@/assets/newImage/botIma.png');
        // background-position: bottom;
        // background-repeat: no-repeat;
        display: flex;
        justify-content: center;
    }
    .lastRound {
        width: 408px;
        height: 408px;
        border-radius: 204px;
        background-color: rgba(64, 229, 240, 0.1);
    }
    .secondRound {
        width: 338px;
        height: 338px;
        border-radius: 169px;
        background-color: rgba(64, 229, 240, 0.15);
    }
    .firstRound {
        width: 272px;
        height: 272px;
        border-radius: 136px;
        background: #206D7C;
        opacity: 1;
    }
    .flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mrT60 {
        margin-top: 60px;
    }
    .mr20px {
        margin-right: 20px;
    }
    .ml20px {
        margin-left: 20px;
    }
  
  }
  
  </style>
  